<script setup>
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
import { onMounted, ref, shallowRef } from 'vue';

const quillRef = ref(null);

onMounted(() => {
  const options = {
    theme: 'snow',
    modules: {
      toolbar: [
        ['bold', 'italic', 'underline', 'strike'],
        ['blockquote', 'code-block'],
        [{ header: 1 }, { header: 2 }],
        [{ list: 'ordered' }, { list: 'bullet' }],
        [{ script: 'sub' }, { script: 'super' }],
        [{ indent: '-1' }, { indent: '+1' }],
        [{ direction: 'rtl' }],
        [{ size: ['small', false, 'large', 'huge'] }],
        [{ header: [1, 2, 3, 4, 5, 6, false] }],
        [{ color: [] }, { background: [] }],
        [{ font: [] }],
        [{ align: [] }],
        ['clean'],
        ['link', 'image', 'video'],
      ],
    },
    placeholder: 'Insert text here ...',
  };
  const quill = new Quill(quillRef.value, options);

  quill.on('text-change', function (delta, oldDelta, source) {
    console.log(delta, oldDelta, source, '----text-change---');
  });
});

const msg = shallowRef('');

setTimeout(() => {
  msg.value = 'quill';
}, 1000);

defineExpose({
  msg,
  getData: () => {
    console.log('--getData--');
  },
});
</script>

<template>
  <div ref="quillRef"></div>
</template>

<style scoped></style>
